<template>
    <div>
        <!-- <h1>维修管理</h1> -->
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/management' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>报告厅管理</el-breadcrumb-item>
            <el-breadcrumb-item>维修申请管理</el-breadcrumb-item>
        </el-breadcrumb>
        
        <el-card>
            <el-form ref="serviceFormRef"  :model="serviceForm" label-width="40px" size="mini">
                <el-col :span="3">
                    <el-form-item label="校区">
                        <el-select v-model="serviceForm.school" placeholder="">
                            <el-option label="北区" value="北区" ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col> 
              <el-col :span="3">
                    <el-form-item label="楼栋" >
                        <el-select v-model="serviceForm.floor" placeholder="">
                            <el-option label="宅1栋" value="宅1栋" ></el-option>
                        </el-select>
                    </el-form-item>
              </el-col>
              <el-col :span="3">
                    <el-form-item label="楼层" >
                        <el-select v-model="serviceForm.school" placeholder="">
                            <el-option label="1F" value="1F" ></el-option>
                        </el-select>
                    </el-form-item>
              </el-col>
              <el-col :span="3">
                    <el-form-item label="户型" >
                        <el-select v-model="serviceForm.school" placeholder="">
                            <el-option label="复式" value="复式" ></el-option>
                        </el-select>
                    </el-form-item>
              </el-col>
              
              <el-col :span="3" :offset="2">
                    <el-form-item>
                        <el-input type="text" placeholder="房间号" v-model="serviceForm.roomNumber"></el-input>
                    </el-form-item>
              </el-col>
              <el-button type="primary" size="mini" @click="searchRoom">提交</el-button>
            </el-form>
        </el-card>
         <div class="features"></div>
        <!-- 数据展示 -->
        <el-card>
            <el-table :data="serviceList" style="width: 100%">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="auditoriumName" label="房间"></el-table-column>
                <el-table-column prop="username" label="报修人"></el-table-column>
                <el-table-column prop="repairId" label="保修单号"></el-table-column>
                <el-table-column prop="repairDetail" label="原因"></el-table-column>
                <el-table-column prop="repairPhone" label="报修人电话"></el-table-column>
                <el-table-column prop="repair_create_time" label="时间"></el-table-column>
                
                <el-table-column prop="caozuo" label="操作">
                    <template>
                        <el-button size="mini" type="warning">立即处理</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <!-- 分页功能 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-sizes="[10,20]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="this.queryInfo.total" background>
            </el-pagination>
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            queryInfo:{
                total:0,
                page:1,
                size:10            
            },
            serviceForm:{
                school:'',
                floor:'',
                roomNumber:''
            },
            serviceList:[]
        }
    },

    
    created(){
        this.getServiceList();
    },
    
    methods: {
        // 获取维修列表
        async getServiceList(){
            await this.$http.get(`AuditoriumRepair/p/${this.queryInfo.page}/${this.queryInfo.size}`).then(res=>{
                if(res.data.code!==1){
                    return this.$message.error('维修列表获取失败')
                }else{
                    this.serviceList = res.data.data.list;
                    this.queryInfo.total = res.data.data.total;
                    // console.log(res);
                    //   this.total = res.data 
                }
          }).catch((err)=>{
              console.log(err);
          })
        },
        // 分页
        handleSizeChange(newSize){
            this.size = newSize;
        },
        handleCurrentChange(newPage){
            this.page = newPage
        },
        // 模糊查询维修列表
        async searchRoom(){
            const res = await this.$http.post('AuditoriumRepair/fuzzyQuery',this.serviceForm)
            console.log(res);
        }
    },
}
</script>
<style scoped>
    .el-button{
        margin-left: 10px;
    }
    .el-form .el-form-item:nth-child(-n+4){
        margin-left: 15px;
    }
</style>
